<template>
    <div class="flex flex-col gap-1 p-1">
        <div class="flex flex-row justify-around items-center gap-1 text-xs font-medium py-1">
            <div class="w-full text-center h-8 flex flex-col justify-center border-blue-400"
                :class="{ 'border-b-2': selected == 0 }">
                <div class="border-r">
                    属性
                </div>
            </div>
            <div class="w-full text-center">
                <div class="border-r">
                    外观
                </div>
            </div>
            <div class="w-full text-center">
                <div>
                    事件
                </div>
            </div>
        </div>
        <div v-if="formJson" class="text-xs p-2">
            <n-form-item label="标题" label-placement="left" label-style="font-size:14px;" label-align="left"
                label-width="80px">
                <n-input v-model:value="formJson.label" placeholder="请输入"></n-input>
            </n-form-item>
            <n-form-item label="字段名" label-placement="left" label-style="font-size:14px;" label-align="left"
                label-width="80px">
                <n-input v-model:value="formJson.name" placeholder="请输入"></n-input>
            </n-form-item>
            <n-form-item v-if="formJson?.props?.placeholder" label="输入提示" label-placement="left"
                label-style="font-size:14px;" label-align="left" label-width="80px">
                <n-input v-model:value="formJson.props.placeholder" placeholder="请输入"></n-input>
            </n-form-item>
            <n-form-item v-if="formJson?.tailwindcss" label="class样式" label-placement="left"
                label-style="font-size:14px;" label-align="left" label-width="80px">
                <n-select v-model:value="formJson.tailwindcss" placeholder="请输入" filterable multiple tag
                    :options="tailwindcssOptions"  :fallback-option="createOption"/>
            </n-form-item>
            <n-form-item label="style样式" label-placement="left" label-style="font-size:14px;" label-align="left"
                label-width="80px">
                <n-input v-model:value="formJson.style" placeholder="请输入"></n-input>
            </n-form-item>
        </div>

        <!-- <button @click="add">Test</button> -->
        {{ formJson }}
        <!-- {{ tailwindcss }} -->
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useFormJsonStore } from '../stores/form-json.js'
import { NInput, NFormItem, NSelect } from 'naive-ui'

const formJsonStore = useFormJsonStore()

// tailwindcss 所有样式
// https://www.tailwindcss.cn/docs/width
// const tailwindcss = ref([])

const createOption = (label) => {
    console.log(label);
    return {
        label,
        value: label,
    };
};

const tailwindcssOptions = [
    {
        label: 'w-1/2',
        value: '1'
    },
    {
        label: 'w-1/3',
        value: '2'
    }
]

const add = () => {
    formJsonStore.setFormJson("1235465767", {
        type: "XFormItem",
        label: "输入框",
        class: "w-64",
        id: "123dfsafrer767",
        type: 'XInput', // 组件类型
        label: '输入框', // 标签
        name: "XInput", // 字段名
        props: { // 组件属性，参考naive-ui文档
            placeholder: '请输入', // 占位符
            "label-placement": "left",
            size: "small",
        }
    })
}

const selected = ref(0)

const formJson = formJsonStore.getCurrentFormJson()

// formJson.value.class = tailwindcss.value.join(' ')
// watch(formJson, (newVal, oldVal) => {
//     tailwindcss.value = []
// })

watch(formJson, (newVal) => {
    if (newVal.tailwindcss) {
        formJson.value.class = newVal.tailwindcss.join(' ')
    }
}, { deep: true })

console.log(formJson.value)
// watch(() => formJson, (newVal, oldVal) => {
//   console.log('Nested object changed:', newVal, oldVal);
// }, { deep: true });

</script>